<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewPort" content="width=device-width,initial-scale=1">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="css/login.css">
</head>
<body>
<div class="wrapper img-bg">
    <div class="login-block">
        <div class="login-animate">
            <div class="left-ear"></div>
            <div class="right-ear"></div>
            <div class="head">
                <div class="left-eye"></div>
                <div class="right-eye"></div>
                <div class="face">
                    <div class="nose"></div>
                    <div class="mouth"></div>
                </div>
            </div>
            <div class="body"></div>
            <div class="left-arm"></div>
            <div class="right-arm"></div>
        </div>

        <form class="login-form" id="loginForm" method="post">
            <div class="username">
                <input type="text" name="username" placeholder="用户名" onchange="change()">
            </div>
            <div class="password">
                <input type="password" name="password" placeholder="密码" onchange="change()">
                <div class="pwd-eye" style="background-image: url('img/password-show.png');" data-flag="hide"></div>
            </div>
            <div class="submit">
                <button class="submit-btn" type="button" onclick="login()">
                    登&nbsp;录
                </button>
            </div>
        </form>
    </div>
    <div class="login-error"></div>
    <footer style="color: #ccc;font-size: .8em; margin-top: 8rem;">众越科技版权所有 &copy;2018</footer>
</div>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        changeBg();

        $(".pwd-eye").hide();
        $(".pwd-eye").click(function () {
            var flag = $(this).attr('data-flag');
            $(this).css('background-image', 'url("img/password-' + flag + '.png")');
            $(this).attr('data-flag', flag == 'show' ? 'hide' : 'show');
            $('input[name="password"]').attr('type', flag == 'show' ? 'password' : 'text');
            if (flag != 'show' && $('input[name="password"]').val() != '') {
                $('.left-arm').addClass('show');
                $('.mouth').addClass('show');
                $('.right-arm').addClass('show');
            } else {
                $('.left-arm').removeClass('show');
                $('.mouth').removeClass('show');
                $('.right-arm').removeClass('show');
            }
        });
        $('input[name="username"]').focus(function () {
            $(".login-animate").addClass('username-animate');
            $(".login-animate").removeClass('password-animate');
            var length = $(this).val().length;
            getposition(length);
        });
        $('input[name="username"]').bind('input', function () {
            var length = $(this).val().length;
            getposition(length);
        });

        function getposition(length) {
            var face = parseFloat(1.5 / 36 * length);
            var nose = parseFloat(1 / 36 * length);
            var left_eye = parseFloat(1.5 / 36 * length);
            var right_eye = parseFloat(2 / 36 * length);
            var left_ear = parseFloat(1 / 36 * length);
            var right_ear = parseFloat(1 / 36 * length);
            $('.face').css('left', 1 + (face > 1.5 ? 1.5 : face) + 'em');
            $('.nose').css('left', 0.9 + (nose > 1 ? 1 : nose) + 'em');
            $('.left-eye').css('left', 0.5 + (left_eye > 1.5 ? 1.5 : left_eye) + 'em');
            $('.right-eye').css('left', 4 + (right_eye > 2 ? 2 : right_eye) + 'em');
            $('.left-ear').css('left', 1.5 - (left_ear > 1 ? 1 : left_ear) + 'em');
            $('.right-ear').css('left', 7.5 - (right_ear > 1 ? 1 : right_ear) + 'em');
            if (length >= 6) {
                $('.left-eye').addClass('doe');
                $('.right-eye').addClass('doe');
                $('.mouth').addClass('doe');
            } else {
                $('.left-eye').removeClass('doe');
                $('.right-eye').removeClass('doe');
                $('.mouth').removeClass('doe');
            }
        }

        $('input[name="username"]').blur(function () {
            $(".login-animate").removeClass('username-animate');
            $(".login-animate").removeClass('password-animate');
            $('.face').attr('style', '');
            $('.nose').attr('style', '');
            $('.left-eye').attr('style', '');
            $('.right-eye').attr('style', '');
            $('.left-ear').attr('style', '');
            $('.right-ear').attr('style', '');
        });
        $('input[name="password"]').focus(function () {
            $(".pwd-eye").show();
            $(".login-animate").removeClass('username-animate');
            $(".login-animate").addClass('password-animate');
        });
        $('input[name="password"]').blur(function () {
            if ($(this).val() == '') {
                $(".pwd-eye").hide();
                $(".login-animate").removeClass('username-animate');
                $(".login-animate").removeClass('password-animate');
            }
        });
    });

    function change() {
        $('.login-error').text('').hide();
    }

    /**
     * ajax 登录
     * @returns {boolean}
     */
    function login() {
        var username = $('input[name="username"]').val();
        var password = $('input[name="password"]').val();
        if (username === '') {
            $('.login-error').text('*用户名为空!').show();
            $('input[name="username"]').focus();
            return false;
        }
        if (password == '') {
            $('.login-error').text('*密码为空!').show();
            $('input[name="password"]').focus();
            return false;
        }
        var formdata = $('#loginForm').serialize();
        if (location.search !== '') {
            formdata = formdata.concat("&" + location.search.substring(1))
        }

        $.ajax({
            type: "POST",
            dataType: 'json',
            url: "/signin",
            data: formdata,
            success: function (ret) {
                debugger
                if (ret.success == false) {
                    console.warn(ret);
                    $('.login-error').text(ret.msg).show();
                } else {
                    location.href = ret.hasOwnProperty('url') ? 'http://'+ret.url : '/';
                }
            },
            error: function (e) {
                console.error(e);
            }
        });
    }


    function changeBg() {
        var idx = random(1, 4)
        if (idx < 1) idx = 1;
        if (idx > 4) idx = 4;
        $(".wrapper").css('background', 'url(../img/bg/' + idx + '.jpg)');
        $(".wrapper").removeClass('img-bg').addClass('img-bg');
    }

    function random(n, m) {
        return Math.floor(Math.random() * (m - n + 1) + n);
    }
</script>
</body>
</html>